<template>
    <first-template class="settlement-contents">
        <div slot="title" class="tab">
            <div class="tab-item" :class="currentIndex == i ? 'current': ''" v-for="(item, i) in tabList" :key="i" @click="choiceTab(item, i)">{{item.name}}</div>
            <span class="current-line" :class="`current-line-${currentIndex}`"></span>
        </div>
        <div slot="content">
        </div>
    </first-template>
</template>
<script>
export default {
    name: 'workBenchSettleMentEngineeringFound',
    data () {
        return {
            tabList: [
                {
                    name: '工资结算',
                    value: 0
                },
                {
                    name: '工程款结算',
                    value: 1
                }
            ],
            currentIndex: 1
        }
    },
    methods: {
        choiceTab (item, i) {
            this.currentIndex = i
            setTimeout(() => {
                this.$router.push('/work-bench/settlement')
            }, 300)
        }
    }
}
</script>
<style lang="less" scoped>
.settlement-contents {
    .tab {
        height: 100%;
        width: 100%;
        overflow: hidden;
        position: relative;
        .tab-item {
            float: left;
            width: 100px;
            height: 100%;
            text-align: center;
            font-size: 16px;
            color: #333;
            cursor: pointer;
            &.current {
                color: #1298FC;
            }
        }
        .current-line {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100px;
            height: 3px;
            background: #1298FC;
            border-radius: 1.5px;
            transition: left .3s;
            &.current-line-0 {
                left: 0;
            }
            &.current-line-1 {
                left: 100px;
            }
        }
    }
}
</style>